export default function updateRealComponents(Vue, page, id) {
    let layerY = parseInt(window.layerY);
    //先默认只拖拽主区域的组件
    let container = document.querySelector("#content-container");
    let components = container.querySelectorAll("div[data-gwdrag]");
    let exits = false;
    // console.log("这是layerY", layerY);
    for (let i = 0; i < components.length; i++) {
        // console.log(components[i].getBoundingClientRect().top);
        if (layerY <= components[i].getBoundingClientRect().top + 5) {
            // console.log("插入到这个元素之前", components[i]);
            updateDom(Vue, page, i, id, "content");
            // console.log("+++++++++++++++++++++", i);

            exits = true;
            break;
        }
        // console.log("0000");
    }

    if (!exits) {
        // console.log("插入到最后一个");
        updateDom(Vue, page, "last", id, "content");
    }
}
/**
 * 
 * @param {*} Vue 
 * @param {*} page 
 * @param {*} i 
 * @param {*} id 
 * @param {*} area 
 */
function updateDom(Vue, page, i, id, area) {
    // console.log("idididididid", id);
    let domTree = Vue.$store.getters.getDomTree;
    let targetIndex;
    //获取拖拽的目标元素的Index
    // console.log("updateDom-id", id);
    // console.log("updateDom-domTree[page][area]", domTree[page][area]);
    for (let item of domTree[page][area]) {
        if (item.id === id) {
            targetIndex = item.index;
            break;
        }
    }
    // console.log("targetIndex", targetIndex);
    //插入到最后一个
    if (i === "last") {
        // console.log(page, domTree[page]);
        domTree[page][area].forEach(item => {
            if (item.index < domTree[page][area].length && item.index > targetIndex) {
                item.index -= 1;
            }
        });
        for (let item of domTree[page][area]) {
            if (item.id === id) {
                item.index = domTree[page][area].length - 1;
                break;
            }
        }
        let tempObj = domTree[page][area][domTree[page][area].length - 1];
        // domTree[page].pop();
        // domTree[page].push(tempObj);
        // console.log(tempObj);
        Vue.$store.commit("setDomTree", domTree);
        // console.log("更新后的", Vue.$store.getters.getDomTree[page][area]);
        return;
    }
    
    
    //根据targetIndex和i的大小采取不同的处理方式
    if (targetIndex < i) {
        // targetIndex < index < i 的要变
        domTree[page][area].forEach(item => {
            if (item.index > targetIndex && item.index < i) {
                item.index = item.index - 1;
            }
        });
        for (let item of domTree[page][area]) {
            if (item.id === id) {
                item.index = i - 1;
                break;
            }
        }
    } else if (targetIndex > i) {
        // i <= index < targetIndex 的要变
        domTree[page][area].forEach(item => {
            if (item.index < targetIndex && item.index >= i) {
                item.index = item.index + 1;
            }
        });
        for (let item of domTree[page][area]) {
            if (item.id === id) {
                item.index = i;
                break;
            }
        }
    }
    
    Vue.$store.commit("setDomTree", domTree);
    // console.log("更新后的", Vue.$store.getters.getDomTree.index);

}